<template>
    <view class="reply-content-wrapper">
        <view class="comment-reply-data" v-for="(item,index) in commentChildren" :key="index">
            <view class="comment-reply-user">
                <view class="comment-root-header">
                    <image class="user-avatar" src="../static/logo.png" mode=""></image>
                    <view class="username">
                        {{item.userInfo.nickName}}
                    </view>
                </view>
                <view class="replycomment-content">
                    <text>回复</text><text class="replyer">{{parentName}}:</text>
                    <text>{{item.talkContent}}</text>
                </view>
                <view class="comment-data">
             <!--      <view class="create-time">
                        {{formatDate(item.createTime)}}
                    </view> -->
                    <view class="operation-icon">
                        <view class="create-time">
                        	{{formatDate(item.createTime)}}
                        </view>
						<view class="operation-item">
							<uni-icons type="chatbubble-filled" size="20"></uni-icons>
							<text @click="openReplay(item.vtalkId)">回复</text>
						</view>
                        <view class="operation-item">
                        	<uni-icons type="hand-down-filled" size="20"></uni-icons>
                        	<text>{{item.unLikeNumber}}</text>
                        </view>
                        <view class="operation-item" @click="like">
                        	<uni-icons type="hand-up-filled" size="20"></uni-icons>
                        	<text>{{item.likeNumber}}</text>
                        </view>
                    </view>
                </view>
            </view>
           <replyComment v-if="item.children" :parentName="item.userInfo.nickName"  @openReplay="openReplay" @send="send" :commentChildren="item.children" @child_up="handleCommentUp" @child_down="handleCommentDown"
             @child_reply="handleCommentInputPopupShow"></replyComment>
        </view>
    </view>
</template>

<script>
    import {
        formateTime
    } from '../utils/formattime.js'
    export default {
        name: 'replyComment',
        props: {
            commentChildren: {
                type: Array,
                default:()=>[]
            },
			parentName: {
				type:String
			}
        },
        data() {
            return {
				
            };
        },
        methods: {
			openReplay(i){
				this.$emit("openReplay",i)
			},
			send(){
				this.$emit("send")
			},
			like(){
				
			},
            // 格式化时间
            formatDate(time) {
                if (!time) {
                    return ''
                }
                const dateTime = new Date(time)
                const YY = dateTime.getFullYear()
                const MM =
                    dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1
                const DD =
                    dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate()
                const hh =
                    dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours()
                const mm =
                    dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes()
                const ss =
                    dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds()
                return `${YY}-${MM}-${DD}`
            },
            handleCommentUp(id) {
                this.$emit('child_up', id)
            },
            handleCommentDown(id) {
                this.$emit('child_down', id)
            },
            handleCommentInputPopupShow(item) {
                this.$emit('child_reply', item)
            },
        }
    }
</script>

<style lang="less" scoped>
	.reply-content-wrapper{
		padding-left: 40rpx;
	}
	.comment-wrap {
		margin-top: 20px;
	}
	
	.user-avatar {
		width: 48rpx;
		height: 48rpx;
		border-radius: 40rpx;
		margin-right: 20rpx;
		vertical-align: middle;
	
	}
	
	.create-time {
		display: inline-flex;
	}
	
	.username {
		display: inline-flex;
		line-height: 40rpx;
	}
	
	.replycomment-content {
		margin-bottom: 20rpx;
		word-break: break-all;
		color: #666;
	}
	
	.comment-data {
		font-size: 12rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.comment-reply-data {
		border-bottom: 2rpx solid #EDEDED;
	}
	
	// .comment-reply-data {}
	.comment-root-header {
		color: #333333;
		margin: 27rpx 0;
	}
	
	.flex-row-space {
		display: inline-flex;
	}
	
	.operation-item {
		display: inline-flex;
		float: right;
		margin-right: 10rpx;
	}
	.replyer{
		margin:0 20rpx;
	}
</style>